<template>
    <div style="width: 1000px;height: 600px;" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
let chart = ref();
onMounted(() => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let ranking1 = ``;
    let ranking2 = ``
    let ranking3 = ``
    let ranking4 = ``
    let ranking5 = ``
    let ranking6 = ``
    let chartIcon = ``;
    let xdata = {
        value: ['刘亦菲', '赵丽颖', '刘诗诗', '高圆圆', '古力娜扎', '迪丽热巴']
    };
    let sdata = {
        value: [10, 20, 30, 40, 50, 60]
    }

    let option = {
        backgroundColor: "#000",
        tooltip: {
            trigger: 'axis',
            backgroundColor: '#081429',
            textStyle: {
                color: '#fff',
            },
            borderColor: "rgba(255,255,255,.2)",
            axisPointer: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                },
            }
        },
        grid: {
            containLabel: true,
            // 边距自行修改
            bottom: '20%',
            left: '5%',
            top: '20%',
            right: '5%',
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        yAxis: [
            {
                type: 'category',
                data: xdata.value,
                inverse: true,
                axisLabel: {
                    fontSize: '18px',
                    inside: true,
                    verticalAlign: 'bottom',
                    lineHeight: 54,
                    margin: 0,       //刻度标签与轴线之间的距离
                    formatter: function (value, index) {
                        if (index > 2) {
                            return `{z|}{img${index}|}{z|} {a|${value}}`
                        }
                        return `{img${index}|} {a|${value}}`
                    },
                    rich: {
                        a: {
                            fontSize: '20px',
                            color: '#D6E0FC',
                            padding: [4, 0, 0, 0],
                        },
                        img0: {
                            width: 34,
                            height: 24,
                            backgroundColor: {
                                image: ranking1,
                            },
                        },
                        img1: {
                            width: 34,
                            height: 24,
                            backgroundColor: {
                                image: ranking2,
                            },
                        },
                        img2: {
                            width: 34,
                            height: 24,
                            backgroundColor: {
                                image: ranking3,
                            },
                        },
                        z: {
                            width: 6,
                            height: 6,
                        },
                        img3: {
                            width: 22,
                            height: 26,
                            backgroundColor: {
                                image: ranking4,
                            },
                        },
                        img4: {
                            width: 22,
                            height: 26,
                            backgroundColor: {
                                image: ranking5,
                            },
                        },
                        img5: {
                            width: 22,
                            height: 26,
                            backgroundColor: {
                                image: ranking6,
                            },
                        }
                    },
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#13387a',
                    },
                },
            },

            {
                type: 'category',
                data: xdata.value,
                inverse: true,
                axisLabel: {
                    inside: true,
                    verticalAlign: 'bottom',
                    lineHeight: 54,
                    margin: 0,       //刻度标签与轴线之间的距离
                    formatter: function (value, index) {
                        return `{a|${sdata.value[index]}}{u|unit}`
                    },
                    rich: {
                        a: {
                            fontSize: 22,
                            color: '#73E3FF',
                            padding: [4, 0, 0, 0],
                        },
                        u: {
                            color: "#fff",
                            fontSize: 16,
                            padding: [2, 0, 0, 4]
                        }
                    },
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#13387a',
                    },
                },
            }
        ],
        series: [
            {
                data: sdata.value,
                type: 'bar',
                barWidth: 8,
                showBackground: true,
                backgroundStyle: {
                    color: '#D0DEEE1A'
                },
                itemStyle: {
                    borderRadius: 40,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#148BCE', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#73E3FF', // 0% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    }
                },
                label: {
                    show: true,
                    position: 'insideRight',
                    distance: -15,
                    formatter: () => {
                        return `{z|}{a|}`
                    },
                    rich: {
                        a: {
                            widht: 30,
                            height: 30,
                            backgroundColor: {
                                image: chartIcon
                            }
                        }
                    }
                }
            }
        ]
    }
    myChart.setOption(option)
})
</script>